<template>
    <div class="common-layout">
        <el-container>
            <el-header style="display: flex; justify-content: center;">
                <div style="width: 20%; text-align: center; line-height: 60px; background-color: brown; font-size: larger ; font-weight: bolder; color: white;">
                    个人信息
                </div>
            </el-header>
            <el-main style="display: flex; flex-direction: column; align-items: center; height: 100%; margin-top: 40px;">
                <div v-for="(value, key) in userInfo" :key="key" style="margin-top: 30px; margin-bottom: 30px; font-weight: bold;">
                    {{ key }}: {{ value }}
                </div>
            </el-main>
            <el-footer style="display: flex; justify-content: center; margin-top: 40px;">
                <el-button style="background-color: brown; color: white; width: 250px;" @click="goUpdate">修改</el-button>
            </el-footer>
        </el-container>
    </div>
</template>
  

<script setup>
import { ref, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter();
import request from "@/utils/request";
import { ElMessage } from 'element-plus'; 

const userInfo = ref({
    用户名: '',
    密码: '',
    性别: '',
    电话: '',
    身份证号: ''
})

const getInfo = async() => {
    try {
        const userData = localStorage.getItem('admin');
        const parseData = JSON.parse(userData);
        const uid = parseData.id;
        const res = await request.get('/user/find', {
            params: {
                id: uid
            }
        });
        if(res.code === '0') {
            userInfo.value = {
                用户名: res.data.name,
                密码: res.data.password,
                性别: res.data.gender,
                电话: res.data.telephone,
                身份证号: res.data.identity
            };
        }
    } catch (error) {
        // 处理请求错误
        ElMessage({
            message: '登录失败，请重试',
            type: 'error'
        });
    }
}

onBeforeMount(async() => {
    await getInfo();
})

const goUpdate = () => {
    router.push('/user/userUpdate')
}

</script>

<style lang="less" scoped>

</style>